<template>
    <div class="home">
        <d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
            <!-- dragable searchBar/可拖拽 -->
            <d2-grid-item v-bind="layout.layout[0]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler">
                <order-filter ref="orderFilter"></order-filter>
            </d2-grid-item>

            <!-- table/表格 -->
            <d2-grid-item v-bind="layout.layout[1]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler" style=" overflow-y: scroll!important;">
                <order-table @tableSelect="tableSelect"></order-table>
            </d2-grid-item>

            <!--  Order summary statistics area /订单汇总统计区 -->
            <d2-grid-item v-bind="layout.layout[2]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler">
                <order-summary></order-summary>
            </d2-grid-item>


        </d2-grid-layout>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { GridLayout, GridItem } from 'vue-grid-layout'
    import d2quill from "../../components/d2-quill"
    import orderFilter from "./order-filter.vue"
    import orderTable from "./order-table.vue"
    import orderSummary from "./order-summary.vue"

    export default {
        components: {
            "d2-quill": d2quill,
            "d2-grid-layout": GridLayout,
            "d2-grid-item": GridItem,
            orderFilter,
            orderTable,
            orderSummary
        },
        data() {
            return {
                TEST: "test",
                openSide: false,
                value: "",
                layout: {
                    layout: [
                        { x: 0, y: 0, w: 12, h: 2, i: '0' }, //searchBar
                        { x: 0, y: 2, w: 12, h: 17, i: '1', dragIgnoreFrom: 'table' }, //orderTable
                        { x: 0, y: 19, w: 12, h: 5, i: '2' }, //Order summary statistics area /订单汇总统计区
                    ],
                    colNum: 12,
                    rowHeight: 30,
                    isDraggable: true,
                    isResizable: true,
                    isMirrored: false,
                    verticalCompact: true,
                    responsive: true,
                    margin: [10, 10],
                    useCssTransforms: true,
                },
            }
        },
        mounted() {
            this.showInfo()
        },
        methods: {
            log(arg1 = 'log', ...logs) {
                if (logs.length === 0) {
                    console.log(arg1)
                } else {
                    console.group(arg1)
                    logs.forEach(e => {
                        console.log(e)
                    })
                    console.groupEnd()
                }
            },

            layoutUpdatedHandler(newLayout) {
                console.group('layoutUpdatedHandler')
                newLayout.forEach(e => {
                    console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
                })
                console.groupEnd()
            },
            resizeHandler(i, newH, newW) {
                this.log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
            },
            moveHandler(i, newX, newY) {
                this.log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
            },
            resizedHandler(i, newH, newW, newHPx, newWPx) {
                this.log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
            },
            movedHandler(i, newX, newY) {
                this.log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
            },
            tableSelect(val) {
                console.log(val)
                if (val.length != 0) {
                    this.$refs.orderFilter.showSelectBtn = true
                } else {
                    this.$refs.orderFilter.showSelectBtn = false
                }
            }
        }
    }
</script>
<style lang="less">
    @import url('~@css/order.less');
</style>